<template>
    <div id="cart">
        <div class="search_bar clearfix">
            <a href="index.html" ><img src="../assets/images/logo.png" class="logo fl"></a>
            <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;评论</div>
            <div class="search_con fr">
                <input type="text" class="input_text fl" name="" placeholder="搜索商品">
                <input type="button" class="input_btn fr" name="" value="搜索">
            </div>
        </div>
        <h>{{ this.orderId }}</h>

        <div class="table-container">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="商品图片" width="180">
                    <template slot-scope="scope">
                        <img :src="serverApiUrl + scope.row.product.imgurl" alt="商品图片" />
                    </template>
                </el-table-column>
                <el-table-column prop="product.name" label="商品名" width="180">
                </el-table-column>
                <el-table-column label="内容">
                    <template slot-scope="scope">
                        <el-input v-model="input[scope.$index]" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="评分">
                    <template slot-scope="scope">
                        <el-rate v-model="value[scope.$index]" show-text>
                        </el-rate>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </div>
    </div>
</template>
<script>
import { getOrderApi } from '../api/GetOrder'
import { serverApiUrl } from '../api/serverApiUrl'
import { addCommentApi } from '../api/AddComment'
export default {
    name: 'Order',
    data() {
        return {
            orderId: 0,
            tableData: [],
            serverApiUrl: serverApiUrl,
            input: [],
            value: [],
        }
    },
    methods: {
        getParams() {
            this.orderId = this.$route.query.orderId;

        },
        onSubmit() {
            const form = [];
            for (let i = 0; i < this.tableData.length; i++) {
                // 创建一个包含当前行数据的对象，并添加到 form 数组中


                addCommentApi({
                    userId: JSON.parse(window.sessionStorage.getItem("user")).id,
                    productId: this.tableData[i].product.id,
                    content: this.input[i],
                    rate: this.value[i],
                }).then(resp => {

                })

            }

            alert("评论成功");
            this.$router.push({
                path: '/myorder',

            })
        }



    },
    created() {
        this.getParams();
        getOrderApi({
            ordersId: this.orderId,
        }).then(resp => {
            console.log(resp);
            this.tableData = resp.orderdetailets
        });
    }

}
</script>
